@use "sass:math";
@import "../css/variables";

.dropdown {
  position: relative;
  display: inline-block;

  .dropdown-title {
    margin-right: 0;
    cursor: pointer;
    user-select: none;
  }

  .dropdown-menu {
    position: absolute;
    background-color: $gray-100;
    box-shadow: 0 2px 5px 0 rgba(0 0 0 / 10%);
    border-radius: $border-radius;
    list-style-type: none;
    padding: math.div($spacer, 1.5) 0;
    margin: math.div($spacer, 4) 0 0 0;
    z-index: 100;
    display: none;
    user-select: none;

    :global(a) {
      color: #4d4d4d;
      text-decoration: none;
      font-weight: 300;
    }

    &.align-right {
      right: 0;
    }

    &.visible {
      display: block;
    }

    a:hover {
      color: inherit;
    }
  }

  :global(svg) {
    margin-bottom: 2px;
  }
}
